<template>
    <div>
 
       <div class="quer" >
           <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
					  <mt-switch   @change="gets"></mt-switch>
                      <img src="https://img.alicdn.com/imgextra/i2/1714128138/O1CN01DNyaK529zFli16kIt_!!1714128138.jpg_60x60q90.jpg" alt="">
                      <div>
                          <p style="color:black;font-weight:550;">小米10（5G）16G全网通</p>
                          <p>
                              <span class="now">￥2199</span> 
                              <number :init="$store.getters.getAllCount" ></number>
                              <a href="#" @click.prevent='dele'>删除</a>
                           </p>
                      </div>
					</div> 
				</div>
			</div>
       </div>
        
        <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner jiesuan">
					<div>
                        <p>总计(不含运费)</p>
                        <p>已勾选商品<span>{{ $store.getters.getmn.count }}</span>,总价<span class="yuan">￥{{ $store.getters.getmn.price }}</span></p>
                    </div>
                    <mt-button type="danger">去结算</mt-button>
					</div>
				</div>
			</div>
            <p>{{ $store.getters.getSelected }}</p>
    </div>
</template>

<script>
// 导入公共的组件
import number from '../gonggong/numbertow.vue'

export default {
    methods:{
        dele(){
         this.$store.commit('deletedd')
        },
        gets(){
            console.log(this.$store.getters.getSelected)
        }
    },
    components:{
        number
    }
}
</script>

<style  scoped>
.mui-card-content-inner{
    display:flex;
    justify-content: space-between;
}
.now{
    color:red;
}
.jiesuan{
    display:flex;
    justify-content: space-between;
    align-items:center;
}
.jiesuan span{
    color:red;
}
.yuan{
    font-size:20px;
    font-weight:550;
}
</style>